<template>
  <el-table :data="filterTableData" border class="tabledata" :cellStyle="cellStyle">
    <el-table-column prop="biographicalNoteId" sortable label="简历编号" />
    <el-table-column prop="name" sortable label="求职者名称" />
    <el-table-column prop="email" sortable label="求职者邮箱" />
    <el-table-column prop="generateTime" sortable label="创建时间" />
    <el-table-column fixed="right" align="right" width="200px">
      <template #header>
        <el-input v-model="search" size="small" placeholder="搜索" />
      </template>
      <template v-slot="scope">
        <el-button type="primary" size="small"
          @click="viewResumeData($event, scope.row.biographicalNoteId, scope.$index)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 查看简历信息弹出框 -->
  <div class="view_biographicalNote_info">
    <el-dialog v-model="biographicalNoteVisible" title="简历信息">
      <el-space direction="vertical">
        <el-card class="box-card" style="width: 250px">
          <template #header>
            <div class="card-header"><span>基本信息</span> </div>
          </template>
          <div class="text item">
            <!-- 基本信息 -->
            <div class="base_info">
              <el-row class="row-bg" justify="space-between">
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">简历编号：</div>{{ data.biographicalNoteInfo.biographicalNoteId }}
                </el-col>
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">姓名：</div>{{ data.biographicalNoteInfo.name }}
                </el-col>
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">邮箱：</div>{{ data.biographicalNoteInfo.email }}
                </el-col>
              </el-row>
              <el-row class="row-bg" justify="space-between">
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">政治面貌：</div>{{ data.biographicalNoteInfo.politicalOutlook }}
                </el-col>
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">入职时间：</div>{{ data.biographicalNoteInfo.dateOfEntry }}
                </el-col>
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">创建时间：</div>{{ data.biographicalNoteInfo.generateTime }}
                </el-col>
              </el-row>
              <el-row class="row-bg" justify="space-between">
                <el-col :span="24" align="left">
                  <div class="form_label">自我描述：</div>{{ data.biographicalNoteInfo.personalDescription }}
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-space>
      <el-space direction="vertical">
        <el-card class="box-card" style="width: 250px">
          <template #header>
            <div class="card-header"><span>教育经历</span> </div>
          </template>
          <div class="text item">
            <!-- 教育经历 -->
            <div class="education_experience">
              <el-row class="row-bg" justify="space-between">
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">学校名称：</div>{{ data.biographicalNoteInfo.schoolName }}
                </el-col>
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">学校类型：</div>{{ data.biographicalNoteInfo.schoolType }}
                </el-col>
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">学历：</div>{{ data.biographicalNoteInfo.degree }}
                </el-col>
              </el-row>
              <el-row class="row-bg" justify="space-between">
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">专业：</div>{{ data.biographicalNoteInfo.major }}
                </el-col>
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">入学时间：</div>{{ data.biographicalNoteInfo.startTime }}
                </el-col>
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">毕业时间：</div>{{ data.biographicalNoteInfo.endTime }}
                </el-col>
              </el-row>
              <el-row class="row-bg" justify="space-between">
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">毕业设计：</div>{{ data.biographicalNoteInfo.graduationProject }}
                </el-col>
                <el-col :span="8" align="left">
                  <div class="form_label" align="left">毕业论文：</div>{{ data.biographicalNoteInfo.thesis }}
                </el-col>
              </el-row>
              <el-row class="row-bg" justify="space-between">
                <el-col :span="24" align="left">
                  <div class="form_label" align="left">学校经历：</div>{{ data.biographicalNoteInfo.schoolExperience }}
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-space>
      <el-space direction="vertical">
        <el-card class="box-card" style="width: 250px">
          <template #header>
            <div class="card-header"><span>工作经历</span> </div>
          </template>
          <div class="text item">
            <!-- 工作经历 -->
            <div class="word_experience">
              <el-row class="row-bg" justify="space-between">
                <el-col :span="12" align="left">
                  <div class="form_label" align="left">项目名称：</div>{{ data.biographicalNoteInfo.projectName }}
                </el-col>
                <el-col :span="12" align="left">
                  <div class="form_label" align="left">项目角色：</div>{{ data.biographicalNoteInfo.projectRole }}
                </el-col>
              </el-row>
              <el-row class="row-bg" justify="space-between">
                <el-col :span="12" align="left">
                  <div class="form_label" align="left">项目开始时间：</div>{{ data.biographicalNoteInfo.projectStartTime }}
                </el-col>
                <el-col :span="12" align="left">
                  <div class="form_label" align="left">项目结束时间：</div>{{ data.biographicalNoteInfo.projectEndTime }}
                </el-col>
              </el-row>
              <el-row class="row-bg" justify="space-between">
                <el-col :span="24" align="left">
                  <div class="form_label">工作描述：</div>{{ data.biographicalNoteInfo.projectDescription }}
                </el-col>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-space>
    </el-dialog>
  </div>
</template>
  
<script setup>
import { ElMessage } from 'element-plus'
import { reactive, ref, computed } from "vue";
import { getBiographicalNotes } from "../../utils/request";
const biographicalNoteVisible = ref(false)
const data = reactive({
  pageSize: 10,
  pageNumber: 1,
  biographicalNotes: [],
  biographicalNoteInfo: {}
})

getBiographicalNotes(data).then(res => {
  if (res.data.code != 200) {
    ElMessage.error(res.data.message || '请求失败')
  } else {
    data.biographicalNotes = res.data.data
  }
})

function viewResumeData(event, id, index) {
  biographicalNoteVisible.value = true;
  data.biographicalNoteInfo = data.biographicalNotes[index];
}
// 表格字段为空操作
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (row[column.property] == null) {
    row[column.property] = '--'
  }
}
// 表格搜索，使用计算属性
const search = ref('')
const filterTableData = computed(() =>
  data.biographicalNotes.filter(
    (data) =>
      !search.value ||
      data.biographicalNoteId == search.value ||
      data.age == search.value ||
      data.name.includes(search.value) ||
      data.email.includes(search.value) ||
      data.email.includes(search.value) ||
      data.generateTime.includes(search.value)
  )
)
</script>
<style scoped>
.tabledata {
  width: 100%;
}

.card-header {
  line-height: 50px;
  height: 50px;
  padding-left: 20px;
  text-align: left;
  font-size: 22px;
}

.form_label {
  display: inline-block;
  width:100px
}
</style>
<style>
.el-dialog__title {
  font-size: 30px;
}

.el-dialog__header {
  line-height: 50px;
  height: 50px;
}

.el-col {
  height: 50px;
  line-height: 50px;
  display: inline-block;
}

.el-dialog {
  width: 100vh;
  height: 100vh;
}

.el-table__cell {
  height: 60px;
}

.el-space,
.el-card,
.el-space__item {
  width: 100%;
}

.el-card__header {
  height: 50px;
  padding: 0;
  line-height: 50px;
}

.el-dialog__body {
  padding: 0 40px;
}
</style>